<template>
  <div>
    <h1 v-color="color">App组件</h1>
    <button @click="changeColor">改变文本颜色</button>
    <hr>
    <Count></Count>
  </div>
</template>

<script>
import Count from "@/components/counter.vue"
export default {
  components:{
    Count,
  },
  data(){
    return{
      color: 'red',
    }
  },
  methods:{
    changeColor(){
      this.color = "green"
    },
  },
directives:{
  // 第定义一个 名为 color 的指令 指向一个配置对象
  // 当指令第一次被绑定到 元素上的时候 会立即触发 bind 函数
  // color:{
  //   bind(el,binding){
  //     el.style.color =  binding.value
  //     console.log(el)
      
  //   },
  //   // 每次 DOM 更新的时候被调用
  //   update(el, binding){
  //     el.style.color = binding.value
  //   },
  // },

  // 自定义函数简写
  color(el, binding){
    el.style.color = binding.value
  }
},
}
</script>

<style>

</style>
